<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
    <!-- <script src="./js/load.js"></script> -->
    <title>咕哝首页</title>
</head>

<body>
    <!-- 导航栏部分 -->
    <div class="header">
        <!-- logo -->
        <div class="logo">
            <img src="img/logo.png" alt="">
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="关键词" class="stor">
            <input type="button" value="搜索" class="buttonup">
        </div>
        <!-- 用户中心 -->
        <div class="user">
            <a href="./login.html"><img src="img/id.jpg" alt=""></a>
            <span>Identity</span>
        </div>
    </div>

    <div class="home">
        <div class="content">
            <div class="stars"></div>
            <img src="./img/img1.jpg" width="100%" alt="">
            <h3 class="title">广外咸鱼的个人网站一日游</h3>
            <h3 class="titles">”所有的星星终将熄灭，可它们无畏地燃烧着。 “————埃迪特·索德格朗</h3>
            <!-- <img class="icon" src="./img/down.png" alt=""> -->
            <div class='ribbon'>
                <a href='./index.html'><span>咕哝首页</span></a>
                <a href='./about.html'><span>一次元表象</span></a>
                <a href='./show.html'><span>四次元内里</span></a>
            </div>
        </div>
        <!-- 四个小图部分 -->
        <div class="icons">
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/img2.jpg" alt="">
                <span>千与千寻</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/img3.jpg" alt="">
                <span>琥珀川之主</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/img4.jpg" alt="">
                <span>电影片段</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/img5.jpg" alt="">
                <span>音乐欣赏</span>
            </div>
        </div>
        <!-- 视频主体部分 -->
        <div class="introduce">
            <div class="introduce_item">
                <video controls="controls" loop poster="img/9.jpg" width="658" height="444">
                    <source src="mus/【七日之都手书】「愛されたい。」-Underground- - 1.アンダーグラウンド(Av756954059,P1).mp4" type="video/mp4">
                </video>
                <span class="introduce_item_title">
                    路边星罗棋布的石祠，是神明的家。幽静的密林深处，一眼望不见去处的隧道有风引你而来。<br><br>
                    那是千的神隐之地，是绮丽的冒险之旅，是少女的成长与爱。是只有怀揣着童心的懵懂少女才能进入的妖怪之乡。<br><br>
                    你还能听见自己纯真而美好的心的呼唤吗？还是早已长成麻木世俗的大人了？那样的大人无法在这片天地生活，因为贪欲，他们被施予了魔法。
                </span>
            </div>
            <div class="introduce_item">
                <span class="introduce_item_titles">名字一旦被夺走，就再也找不到回家的路了。<br>
                    “汤婆婆会夺走别人的名字，然后支配他。”<br><br>
                    “我到现在都想不起自己的名字，可是真不可思议，我居然还记得你的名字。”<br><br>
                    “不要紧的，我已经找回了自己的名字，可以回到原来的世界了。”<br>
                    “我们还会在那里相逢吗？”<br>
                    ”一定会的。“
                </span>
                <video controls="controls" loop poster="img/9.jpg" width="658" height="444">
                    <source src="mus/【鏡音リン・レン、Lily feat. team OS】红与白与黒的系譜 - 1.1(Av2205385,P1).mp4" type="video/mp4">
                </video>
            </div>

            <!-- <div class="introduce_item">
                <img class="introduce_item_img" src="./img/xiaowangzi (2).png" alt="">
                <span
                    class="introduce_item_title">狐狸说：“对我来说，你只是一个小男孩，就像其他成千上万个小男孩一样没有什么两样。我不需要你。你也不需要我。对你来说，我也只是一只狐狸，和其他成千上万的狐狸没有什么不同。但是，如果你驯养了我，我们就会彼此需要。对我来说，你就是我的世界里独一无二的了；我对你来说，也是你的世界里的唯一了。”</span>
            </div>
            <div class="introduce_item">
                <span class="introduce_item_titles">玫瑰花：＂我并非如此的弱不禁风...夜晚的凉风对我倒有好处。我是一朵花啊。＂<br><br>
                    她天真地显露出她那四根刺，随后又说道： “别这么磨蹭了。真烦人！你既然决定离开这儿，那么，快走吧！” 她其实是不愿意让小王子看到自己哭泣。她曾经是多么高傲的一朵花……<br><br>
                    玫瑰在小王子离开时这样说，我当然爱你，没有让你感觉到，是我的不对。
                </span>
                <img class="introduce_item_img" src="./img/meigui (2).png" alt="">
            </div> -->
        </div>
        <!-- 轮播图与音频部分 -->
        <div class="w">
            <div class="slider">
                <a href="javascript:;" class="arrow-l">
                    < </a>
                        <a href="javascript:;" class="arrow-r"> > </a>
                        <!-- 核心滚动区域 -->
                        <ul>
                            <li><img src="./img/qx4.jpg" /></li>
                            <li><img src="./img/qx5.jpg" /></li>
                            <li><img src="./img/qx3.jpg" /></li>
                            <li><img src="./img/qx2.jpg" /></li>
                            <li><img src="./img/qx1.jpg" /></li>
                            <!-- <li><img src="./img/qx0.jpg" /></li> -->
                        </ul>
                        <!-- 小圆圈 -->
                        <ol class="circle current"> </ol>
            </div>
            <div class="right">
                <table>
                    <th>Blueprint</th>
                    <tr>
                        <td><audio controls onplay="shopicture()" onpause="hidepicture" onended="thanks()">
                                <source src="mus/StrayKids丨Blueprint.mp3">
                        </td>
                    </tr>
                    <th>いつも何度でも</th>
                    <tr>
                        <td><audio controls onplay="shopicture()" onpause="hidepicture" onended="thanks()">
                                <source src="mus/いつも何度でも （永远常在).mp3">
                        </td>
                    </tr>
                    <th>あの夏へ</th>
                    <tr>
                        <td><audio controls onplay="shopicture()" onpause="hidepicture" onended="thanks()">
                                <source src="mus/あの夏へ（那个夏天）.mp3">
                        </td>
                    </tr>
                    <th>白龙少年</th>
                    <tr>
                        <td><audio controls onplay="shopicture()" onpause="hidepicture" onended="thanks()">
                                <source src="mus/竜の少年 （白龙少年）.mp3">
                        </td>
                    </tr>
                    <th>Winter falls</th>
                    <tr>
                        <td><audio controls onplay="shopicture()" onpause="hidepicture" onended="thanks()">
                                <source src="mus/StrayKids丨Winter Falls.mp3">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <footer class="footer">
            <h5 class="final">—————————————首页就到这里吧—————————————</h5>
            <h6 class="final">制作人员：郑雨蓓</h6>
        </footer>
    </div>
</body>

</html>